<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/echarts.min.js"></script>
  <script src="./js/world.js"></script>
  <!-- <script src="./js/dataMap.js"></script> -->
</head>

<body>
  <div style="width:600px;height:400px;border:1px solid #ff0000;"></div>
</body>

<!-- 
  1.启用一个服务，用http协议来访问
  2.script标签的type设置成module
 -->
<script type="module">
  import { dataMap } from "./js/dataMap.js"
  import { nameMap } from "./js/nameMap.js"
  // console.log(dataMap)
  let myChart = echarts.init(document.querySelector("div"))
  let option = {
    // geo:{
    //   map:"china"
    // },
    series: [
      {
        type: "map",           //系列的类型
        mapType: "world",      //地图类型
        data: dataMap,          //各个国家肺炎感染数据
        nameMap: nameMap,        //翻译国家名称（英文-->中文）
        //鼠标没有悬浮时候样式
        itemStyle: {
          areaColor: "#fffbe5",

        },
        //鼠标悬浮之后的样式
        emphasis: {
          itemStyle: {
            areaColor: "#ff0000"      //区域颜色
          }
        }
      }
    ],
    //视图映射
    visualMap: {
      type: "piecewise",          //切片效果
      itemWidth: 50,              //视图映射的宽度
      itemHeight: 20,             //视图映射的高度
      //定制样式
      pieces: [
        { min: 0, max: 0, label: 0, color: "#a4eb0b" },
        { min: 1, max: 10, label: "1-10", color: "#ddeb0b" },
        { min: 10, max: 20, label: "10-20", color: "#eba50b" },
        { min: 20, max: 30, label: "20-30", color: "#eb630b" },
        { min: 30, max: 100, label: "30-40", color: "#eb0e0b" },
        { min: 100, label: ">100", color: "#b93e26" },
      ]

    }
  }
  myChart.setOption(option)
</script>

</html>